import QtQuick 2.12
import QtQuick

Window {
    id:root
    width: 1200
    height: width/9*6
    visible: true
    title: qsTr("状态装换和动画")
    Column{
        Rectangle {
            id: signal
            width: 200; height: 200
            state: "NORMAL"

            states: [
                State {
                    name: "NORMAL"
                    PropertyChanges { target: signal; color: "green"}
                },
                State {
                    name: "CRITICAL"
                    PropertyChanges { target: signal; color: "red"}
                }
            ]
            //点击切换状态
            MouseArea
            {
                anchors.fill: parent
                onClicked: {
                    if( signal.state === "NORMAL")
                        signal.state = "CRITICAL"
                    else
                        signal.state = "NORMAL"
                }
            }
        }
        //默认状态  当signal 状态发生变化 下面切换状态
        Rectangle {
            id: bell
            width: 75; height: 75
            color: "yellow"

            states: State {
                name: "RINGING"
                when: (signal.state === "CRITICAL")
                PropertyChanges {target: bell; color:"red"}
            }
        }
        //行为与状态结合使用
        Rectangle {
            width: 200
            height: 200

            Rectangle {
                id: coloredRect
                width: 100
                height: 100
                anchors.centerIn: parent

                //color: "red"

                //使用条件来改变颜色值
                color: mouser.containsMouse ?  "grey" : "red"

                Behavior on color {
                    ColorAnimation {}
                }

                MouseArea {
                    id: mouser
                    anchors.fill: parent
                    hoverEnabled: true  //悬浮 背后颜色变化，移开恢复原样
                }
                // 使用条件 改变就不需要下面的状态
                // states: State {
                //     name: "GreenState"
                //     when: mouser.containsMouse

                //     PropertyChanges {
                //         target: coloredRect
                //         color: "green"
                //     }
                // }
            }
        }
        //使用过度动画 而不是行为变化
        Rectangle {
            width: 200
            height: 200
            Rectangle {
                id: coloredRect2
                width: 100
                height: 100
                anchors.centerIn: parent

                color: "red"

                MouseArea {
                    id: mouser2
                    anchors.fill: parent
                    hoverEnabled: true
                }

                states: State {
                    name: "GreenState"
                    when: mouser2.containsMouse

                    PropertyChanges {
                        target: coloredRect2
                        color: "green"
                    }
                }

                transitions: Transition {
                    ColorAnimation {}
                }
            }
        }
        //使用明确定义的状态，而不是隐含的基本状态
        Rectangle {
            width: 200
            height: 200

            Rectangle {
                id: coloredRect3
                width: 100
                height: 100
                anchors.centerIn: parent

                Behavior on color {
                    ColorAnimation {}
                }

                MouseArea {
                    id: mouser3
                    anchors.fill: parent
                    hoverEnabled: true
                }

                states: [
                State {
                    name: "GreenState"
                    when: mouser3.containsMouse

                    PropertyChanges {
                        target: coloredRect3
                        color: "green"
                    }
                },
                State {
                    name: "RedState"
                    when: !mouser.containsMouse

                    PropertyChanges {
                        target: coloredRect3
                        color: "red"
                    }
                }]
            }
        }
    }
}
